import React, { Component } from 'react';
// 页面中使用strre中的数据
import store from '../../store'
console.log('store', store);

class Test1 extends Component {
    constructor() {
        super()
        this.state = store.getState()
        console.log(this.state);

        //需要重新订阅store仓库中的state 数据, 这样才能实时更新
        //语法:  store.subscribe(listener) listener为监听函数,当store中的数据变化时, 就会触发该函数
        store.subscribe(() => {
            console.log('count变了');
            this.setState((state) => {
                return store.getState()
            })
        })

        // 以上方法可以简写:
        // store.subscribe(() => this.setState((state) => store.getState()))
    }
    render() {
        let { userinfo, count } = this.state

        return (
            <div>
                我是test 页面用来操作store数据的
                <p onClick={this.addCount}>count:{count}</p>
                <p onClick={this.editName}>{userinfo.username}=={userinfo.age}</p>
            </div>
        );
    };
    addCount = () => {
        // 使用disaptch 派发一个action任务
        // action 任务是一个对象,该对象中有一个属性type,作为一个标识使用,还有一个可选参数payload 
        store.dispatch({
            type: '+',
            payload: 1
        })
    };
    editName() {
        store.dispatch({ type: 'edit', payload: '李总理' })
    }
}

export default Test1;
